import React, { Component } from 'react'
import {
    StyleSheet,
    View,
    Image,
    ScrollView,
    StatusBar
} from 'react-native'
import { observer, inject } from 'mobx-react'
import Index from '../components'
const home = require('../../../assets/tab/shouye.png')
const home_active = require('../../../assets/tab/shouye1.png')
import navigationhelper from 'src/components/navigationhelper'
import XGPush from 'react-native-xinge-push';
import StorageDatas from '../../../utils/storageDatas'
import Layer from '../../../components/Layer';
import DeviceInfo from 'react-native-device-info';
import AuthVerSion from '../../../service/Auth'


@inject('config', 'userAuth')
@observer
export default class Home extends Component {
    static navigationOptions = ({ navigation, screenProps }) => ({
        tabBarIcon: (({ tintColor, focused }) => {
            return (
                <Image
                    source={!focused ? home : home_active}
                    style={{ resizeMode: 'stretch' }}
                />
            )
        }),
        tabBarLabel: '主页',
        gesturesEnabled: true,
    })

    componentDidMount() {
        this.props.config.fetchHomeConfig()
        this.loadLocalStorageData()
    }

    loadLocalStorageData = () => {
        const key = 'userAccount';
        StorageDatas.loadLocalStorage(key).then(data => {
            this.props.userAuth.Login({
                mobile: data.userAccount,
                password: data.passAccount
            }).then((res) => {
                this.initGpush()
                this.props.userAuth.fetchCurrentUserInfo({token:this.props.userAuth.token})
            }).catch(err => {
                Layer.showMsg('请先登录')
                navigationhelper.navigate('Login')
            });
        }).catch(err => {
            Layer.showMsg('请先登录')
            navigationhelper.navigate('Login')
        });
    }
    initGpush = () => {
        XGPush.register(`${this.props.userAuth.currentUser.mobile}`).then(result => {
            this.getPhoneInfo()
        }).catch(err => {
        });
    }

    getPhoneInfo =()=>{
        AuthVerSion.getPhoneInfo({
            system: DeviceInfo.getSystemName(),
            appVersion: DeviceInfo.getVersion(),
            version: DeviceInfo.getSystemVersion(),
            phone_model: DeviceInfo.getModel(),
            uuuid: DeviceInfo.getUniqueID(),
            token:this.props.userAuth.token
        }).then((res) => {
        }).catch((error) => {
        })
    }
    render() {
        var { config } = this.props.config
        return (
            <View style={styles.container}>
                <StatusBar
                    hidden={false}
                    backgroundColor={"transparent"}
                    barStyle={'light-content'}
                    translucent={false} />
                <ScrollView style={{ backgroundColor: 'white' }}>
                    <Index config={config}></Index>
                </ScrollView>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    bottom: {
        marginBottom: 30
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
})